<template>
	<div id="infolist">
		<el-row>
			<el-col :span="12">
				<router-link to="/toolbar">
				<div class="news_list">
					<p class="news_time"><span>26<font>03</font></span><img src="../../../public/images/img1.jpg" ></p>
					<div class="news_detail">
						<h3>上海发布新的不良资产处置文案</h3>
						<p>上海徐汇光大花园地处于徐园地处于徐汇黄金地段地段环境上海徐汇光大花园地处于徐园地处于徐汇黄金地段地段环境</p>
					</div>
				</div>
				</router-link>
			</el-col>
			<el-col :span="12">
				<router-link to="/toolbar">
				<div class="news_list">
					<p class="news_time"><span>26<font>03</font></span><img src="../../../public/images/img1.jpg" ></p>
					<div class="news_detail">
						<h3>上海发布新的不良资产处置文案</h3>
						<p>上海徐汇光大花园地处于徐园地处于徐汇黄金地段地段环境上海徐汇光大花园地处于徐园地处于徐汇黄金地段地段环境</p>
					</div>
				</div>
				</router-link>
			</el-col>
			<el-col :span="12">
				<div class="news_list">
					<p class="news_time"><span>26<font>03</font></span><img src="../../../public/images/img1.jpg" ></p>
					<div class="news_detail">
						<h3>上海发布新的不良资产处置文案</h3>
						<p>上海徐汇光大花园地处于徐园地处于徐汇黄金地段地段环境上海徐汇光大花园地处于徐园地处于徐汇黄金地段地段环境</p>
					</div>
				</div>
			</el-col>
			<el-col :span="12">
				<div class="news_list">
					<p class="news_time"><span>26<font>03</font></span><img src="../../../public/images/img1.jpg" ></p>
					<div class="news_detail">
						<h3>上海发布新的不良资产处置文案</h3>
						<p>上海徐汇光大花园地处于徐园地处于徐汇黄金地段地段环境上海徐汇光大花园地处于徐园地处于徐汇黄金地段地段环境</p>
					</div>
				</div>
			</el-col>
			<el-col :span="12">
				<div class="news_list">
					<p class="news_time"><span>26<font>03</font></span><img src="../../../public/images/img1.jpg" ></p>
					<div class="news_detail">
						<h3>上海发布新的不良资产处置文案</h3>
						<p>上海徐汇光大花园地处于徐园地处于徐汇黄金地段地段环境上海徐汇光大花园地处于徐园地处于徐汇黄金地段地段环境</p>
					</div>
				</div>
			</el-col>
			<el-col :span="12">
				<div class="news_list">
					<p class="news_time"><span>26<font>03</font></span><img src="../../../public/images/img1.jpg" ></p>
					<div class="news_detail">
						<h3>上海发布新的不良资产处置文案</h3>
						<p>上海徐汇光大花园地处于徐园地处于徐汇黄金地段地段环境上海徐汇光大花园地处于徐园地处于徐汇黄金地段地段环境</p>
					</div>
				</div>
			</el-col>
		</el-row>
		<p class="pageNav">
			<a href="javascript:;">上一页</a>
			<a href="javascript:;">下一页</a>
		</p>
	</div>
</template>
<script>
	export default {
		name: "infolist"
	}
</script>
<style scoped lang="less" rel="stylesheet/less" type="text/css">
	@import '../../../public/css/variable.less';
	.el-row{
		.cf();
	}
    .el-col{
    	padding: 0;
        .news_list{
        	.cf();
            background: @cw;
            padding: 2px;
            box-sizing: border-box;
            .trans(0.5s);
            margin: 10px;
        
        .news_time{
            float: left;
            position: relative;
            width: 225px;
            height: 140px;
            margin-right: 25px;
            img{
                width: 100%;
                height: 100%;
            }
            span{
                position: absolute;
                top: 50%;
                left: 50%;
                width: 100px;
                height: 75px;
                display: inline-block;
                color: @cw;
                .fonts(33px);
                font-weight: 100;
                padding: 5px;
                box-sizing: border-box;
                margin: -45px -40px;
                z-index: 1;
                font{
                    position: absolute;
                    display: inline-block;
                    .fonts(26px);
                    width: 50px;
                    top: 50px;
                    right: 5px;
                    &:before{
                        content: "";
                        display: block;
                        .bias(40px, 40px, @color:#fff, @line_width:1px);
                            top: -44px;
                            right: 10px;
                            width: 105px;
                    }
                }
            }
            &:before{
                content: "";
                position: absolute;
                width: 94%;
                height: 94%;
                left: 3%;
                top: 3%;
                background: url('../../../public/images/line_4.png') no-repeat;
                background-size: 100% 100%;
                z-index: 99;
            }
            &:after{
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                width: 0;
                height: 0;
                background: url('../../../public/images/o_gray2.png') repeat;
                background-size: 100%;
                .trans(0.5s);
            }
        }
        .news_detail{
            color: #92969b;
            margin: 25px 20px 0 250px;
            h3{
                position: relative;
                .fonts(16px);
                .ellipsis();
                color: #75777a;
                margin-bottom: 15px;
                padding-bottom: 8px; 
                &:before{
                    content: "";
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 25px;
                    height: 2px;
                    background: @cgolden;
                }
            }
            p{
                .spil(2);
                .fonts(12px);
                line-height: 24px;
                height: 48px;
            }
        }
        &:hover{
            -webkit-box-shadow: 2px 2px 2px @cgolden;
            -moz-box-shadow: 2px 2px 2px @cgolden;
            .news_time:after{
                content: "";
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
            }
        }
        }
    }     
	.pageNav{
		margin: 25px auto;
    	text-align: center;
    	a{
    		display: inline-block;
		    .fonts(18px);
		    text-align: center;
		    background: #fff;
		    border: 1px solid #d8b26a;
		    color: #858a8d;
		    padding: 8px 20px;
		    margin: 0 15px;
		    &:hover{
		    	background: @cgolden;
    			color: #fff;
		    }
    	}
	}
</style>
